<template>
  <div class="wty-prop">
    <ul>
      <li v-for="(food, key) in foods" :key="key">{{ key }}:{{ food.name }}</li>
    </ul>
    <p>{{ info }}</p>
  </div>
</template>

<script>
// 列表中的内容由父组件传递，通过props属性接受
export default {
  props: {
    foods: {
      type: Array, // 规定接受的类型是数组
      default: function() {
        // 默认值为一个空数组
        // [{name:"苹果"},{name:"香蕉"}]
        return []; // 定义数组的缺省值为空数组
      }
    },
    info: {
      type: String,
      default: "基本信息"
    }
  }
};
</script>

<style lang="scss" scoped></style>
